<template>
    <!-- 总容器 -->
    <div class="wrapper">
        <!-- 头部 -->
        <header>
            <div class="header-content">
                <div class="header-content-left">
                    <img class="icon" :src="'src/img/hospitalhead.png'" alt="医院头部图标">
                    <h1>宏泽医院</h1>
                    <i class="fa fa-angle-down"></i>
                </div>
                <div v-if="user" class="user-info">
                    <p>欢迎，{{ user.realName }}！</p>
                </div>
                <i class="fa fa-envelope-o"></i>

            </div>
            <div class="header-bottom">
                <div class="announcement">
                    <span class="highlight">医院公告</span>
                    <div @click="goToAlter">
                        <span>{{ announcementText }}</span>
                    </div>
                </div>
                <img class="search-icon" :src="'src/img/search.png'" alt="搜索" @click="goToSearch">
            </div>
        </header>

        <div class="top-ban"></div>

        <!-- 导航部分 -->
        <nav>
            <div src="'src/img/search.png'">
                <ul>
                    <li class="appointment-item">
                        <img src="@/img/appoint.png">
                        <div class="nav-item-text-big">
                            <h3 @click="goToAppointment">在线预约</h3>
                            <p>在线体检套餐定制</p>
                        </div>
                    </li>

                    <li class="consult-item">
                        <img src="@/img/Aichat.png">
                        <div class="nav-item-text">
                            <div @click="goToAi">
                                <h3>网络问诊</h3>
                            </div>
                            <p>图文视频网络咨询</p>
                        </div>
                    </li>

                    <li class="care-item">
                        <img src="@/img/gohome.png">
                        <div class="nav-item-text">
                            <h3>上门护理</h3>
                            <p>网上购买上门服务</p>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>

        <!-- 我的健康报告 -->
        <div class="report">
    <div class="item-title">
        <p>服务</p>
    </div>
    <div class="report-content">
        <div class="report-icon">
            <img class="icon" :src="'src/img/record.png'" alt="医院头部图标" @click="goToAppointment">
            <i class="fa fa-angle-down"></i>
            <h5>预约挂号</h5>
        </div>
        <div class="report-icon">
            <img class="icon" :src="'src/img/today.png'" alt="医院头部图标" @click="goToAppointmentlist">
            <i class="fa fa-angle-down"></i>
            <h5>预约报告</h5>
        </div>
        <div class="report-icon">
            <img class="icon" :src="'src/img/car.png'" alt="医院头部图标" @click="goToAppointment">
            <i class="fa fa-angle-down"></i>
            <h5>停车缴费</h5>
        </div>
        <div class="report-icon">
            <img class="icon" :src="'src/img/tax.png'" alt="医院头部图标" @click="goToAppointment">
            <i class="fa fa-angle-down"></i>
            <h5>电子票夹</h5>
        </div>
        <div class="report-icon">
            <img class="icon" :src="'src/img/money.png'" alt="医院头部图标" @click="goToAppointment">
            <i class="fa fa-angle-down"></i>
            <h5>缴费</h5>
        </div>
        <!-- 添加更多的 report-icon 项目 -->
    </div>
</div>
        <!-- 推荐医生 -->
        <div class="doctor">
            <div class="item-title">
                <p>推荐医生</p>
                
            </div>
            <ul>
                <li v-for="doctor in doctors" :key="doctor.docId" class="doctor-item">
                    <div class="doctor-info">
                        <img src="@/img/doctor1.jpg" alt="医生图片">
                        <div class="doctor-details">
                            <h3>{{ doctor.realName }}</h3>
                            <p>性别: {{ doctor.sex === 1 ? '男' : '女' }}</p>
                            <p>科室编号: {{ doctor.deptName }}</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>


        <div class="bottom-ban"></div>
    </div>
    <Footer></Footer>
</template>




<script>
import Footer from '@/components/Footer.vue';
import { useRouter } from 'vue-router';
import { getSessionStorageItem } from '../common.js'; // 引入获取sessionStorage的方法
import axios from 'axios'; // 引入 axios 用于发起 HTTP 请求

export default {
    setup() {
        const user = getSessionStorageItem('user');
        return { user };
    },
    data() {
        return {
            announcementText: "小程序使用温馨提示",
            doctors: [] // 存储医生列表
        };
    },
    components: {
        Footer
    },
    mounted() {
        const texts = ["小程序使用温馨提示", "复诊续方操作须知"];
        let index = 0;

        this.timer = setInterval(() => {
            this.announcementText = texts[index];
            index = (index + 1) % texts.length;
        }, 3000);

        // 获取医生列表
        this.fetchDoctors();
    },
    beforeUnmount() {
        clearInterval(this.timer);
    },
    methods: {
        goToAppointment() {
            this.$router.push('/appointment');
        },
        goToAppointmentq() {
            this.$router.push('/appointment');
        },
        goToAppointmentlist() {
            this.$router.push('/reportlist');
        },
        goToAlter() {
            this.$router.push('/alter');
        },
        goToAi() {
            this.$router.push('/aichat');
        },
        goToSearch() {
            this.$router.push('/search');
        },
        async fetchDoctors() {
            try {
                const response = await axios.post('http://localhost:8080/doctor/list');
                this.doctors = response.data.data;
            } catch (error) {
                console.error("Failed to fetch doctor list", error);
            }
        }
    }
}
</script>


<style scoped>
/*********************** 总容器 ***********************/
.wrapper {
    width: 100%;
    background-color: #f4f4f4;
    /* 变得圆润 */
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    /* 浅绿色 */
}

/*********************** header ***********************/
nav ul li .left {
    display: flex;
    align-items: center;
}

nav ul li .right {
    user-select: none;
    cursor: pointer;
    align-items: center;

}

/* 服务中的样式大小 */
.icon {
    float: left;

    width: 20%;
    height: 8.2vw;
    /* 变得圆润 */
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}


/* 头部 */
header {
    width: 100%;
    height: 19.7vw;
    background: linear-gradient(to right, #fffcf5, #ccc019, #e47b4e);
    /* 渐变色：浅橙色、浅棕色和白色 */

    position: fixed;
    left: 0;
    top: 0;

    /* 变得圆润 */
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

header .header-content {
    width: 120%;
    height: 20.2vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header .header-content .header-content-left {
    width: 30%;
    height: 8.2vw;
    display: flex;
    align-items: center;
}

header .header-content .header-content-left h1 {
    font-size: 5vw;
    font-weight: 500;
    margin-left: 3.6vw;
    letter-spacing: 0.4vw;
}

header .header-content .header-content-left .fa-angle-down {
    font-size: 6vw;
    margin-left: 2vw;
}

header .header-content .fa-envelope-o {
    font-size: 5.6vw;
    margin-right: 3.6vw;
}


/* 搜索框的样式 */
.header-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem;
    background: linear-gradient(to right, #f5f8fa, #88dab9, #77e3ad);
    border-top: 1px solid #DDD;
}


.announcement {
    display: flex;
    align-items: center;
}

.highlight {
    color: red;
    /* 红色文字 */
    margin-right: 10px;
    /* 右边距 */
}

#announcementText {
    animation: changeText 3s infinite;
    /* 切换文字动画 */
}

@keyframes changeText {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}

.search-icon {
    width: 34px;
    height: 34px;
    cursor: pointer;

    /* 变得圆润 */
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/*********************** nav ***********************/


nav {
    /* 在线预约那几个的的背景框 */
    width: 100%;
    height: 90vw;
    background: linear-gradient(to right top, white, rgba(255, 255, 255, 0.5));
    margin-bottom: 3vw;
    overflow: hidden;
    margin-top: 10vw;
    /* 添加这行，增加margin-top以使整个nav部分下移 */


    /* 变得圆润 */
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

nav .logo-img {
    width: 92.8vw;
    height: 28vw;
    margin: 0 auto;
    margin-top: 3.6vw;


}

nav .logo-img img {
    width: 92.8vw;
    height: 28vw;
}

nav ul {
    width: 92.8vw;
    margin: 0 auto;
    margin-top: 11vw;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;


}


/* 下面两个服务的功能边框 */
nav ul li {
    width: 45.5vw;
    /* 每个 li 的宽度 */
    height: 19.8vw;
    /* 每个 li 的高度 */
    box-sizing: border-box;
    padding-top: 3vw;
    border: solid 1px #EFEFEF;
    box-shadow: 0 2px 0 rgba(245, 216, 75, 0.04);

    border-radius: 1vw;
    margin-bottom: 1vw;

    display: flex;
    align-items: center;
    justify-content: space-between;

    /* 变得圆润 */
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}


nav ul li.appointment-item {
    width: 800%;
    height: 39.8vw;
    margin-top: 5vw;
    /* 添加这行，增加margin-top以使在线预约部分下移 */
    background-color: #BFEFFF;
    /* 设置浅蓝色背景 */
    /* 变得圆润 */
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

nav ul li.consult-item {
    margin-top: 49vw;
    /* 调整 margin-top 以适应布局 */

    background: linear-gradient(to right, #f5c4e9, #ff91ca);
    /* 渐变色：浅暖粉色到深暖粉色 */
}

nav ul li.care-item {


    margin-top: -20.5vw;
    /* 调整 margin-top 以适应布局 */

    /* 网络问诊和上门护理占据一行 */
    background: linear-gradient(to right, #a8e6cf, #a9e98b);
    /* 渐变色：浅绿色到深绿色 */

}

nav ul li:nth-child(1) {
    /* 第一个<li>元素，即在线预约 */
    width: 45.5vw;
    /* 原来的宽度 */
    height: 39.8vw;
    /* 原来的高度 */
    background-color: #BFEFFF;
    /* 设置浅蓝色背景 */
}

nav ul li:nth-child(1) .nav-item-text-big {
    width: 41vw;
    /* 设置为网络问诊宽度的两倍 */
    height: 28vw;
    /* 设置为网络问诊高度的两倍 */
}


nav ul li img {
    width: 10vw;
    height: 10vw;
    margin: 0 1.4vw;
}

nav ul li .nav-item-text {
    width: 20vw;
    /* 修改宽度 */
    height: 14vw;
    /* 修改高度 */
    font-size: 17.8vw;
    font-weight: 500;
    margin-bottom: 1vw;
}

nav ul li .nav-item-text big {

    width: 60vw;
    /* 修改宽度 */
    height: 34vw;
    /* 修改高度 */
    font-size: 6.8vw;
    font-weight: 500;
    margin-bottom: 1vw;
}

nav ul li .nav-item-text h3 {
    /* 字体 */
    font-size: 2.8vw;
    font-weight: 500;
    margin-bottom: 1vw;
}

nav ul li .nav-item-text p {
    font-size: 3.4vw;
    color: #2f2a2a;
}

nav ul li .nav-item-text .menu03-h3-span {
    font-size: 6vw;
}

/*********************** 我的健康报告 ***********************/
.report {
    width: 100%;
    background-color: #FFF;
    margin-bottom: 3vw;
        /* 变得圆润 */
        border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.report-content {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    justify-content: space-between; /* 让项目之间有一定的间隔 */
    padding: 0 3.6vw;
}

.report-icon {
    display: flex;
    flex-direction: column; /* 使元素垂直排列 */
    align-items: center; /* 水平居中对齐 */
    justify-content: center; /* 垂直居中对齐 */
    width: 22%; /* 每行四个项目 */
    margin-bottom: 20px; /* 每行项目之间的间距 */
}

.report-icon .icon {
    width: 50px; /* 根据需要调整图标大小 */
    height: 50px; /* 根据需要调整图标大小 */
    margin-bottom: 10px; /* 图标和下方元素之间的间距 */
}

.report-icon .fa-angle-down {
    margin-bottom: 10px; /* 图标和下方元素之间的间距 */
}

.report-icon h5 {
    font-size: 16px; /* 根据需要调整字体大小 */
    margin: 0; /* 去除默认外边距 */
}


/*********************** 推荐医生 ***********************/
/* 推荐医生 */
.doctor {
    width: 100%;
    background-color: #FFF;
    margin-bottom: 3vw;
}

.doctor ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* 使医生信息竖着显示 */
}

.doctor ul li {
    width: 100%;
    display: flex;
    align-items: center;
    /* 将照片和医生信息水平对齐 */
    border: 1px solid #ddd;
    /* 添加边框 */
    margin-bottom: 2vw;
    /* 每个医生之间的间距 */
    padding: 2vw;
    /* 内边距 */
    border-radius: 5px;
    /* 边框圆角 */
    background: linear-gradient(to right, #ccf0e3, #85e1ed);
    /* 渐变色：浅绿色到深绿色 */
}

.doctor ul li img {
    width: 14vw;
    height: 14vw;
    border-radius: 7vw;
    margin-right: 2vw;
    /* 照片与医生信息之间的间距 */
}

.doctor ul li .doctor-details {
    display: flex;
    flex-direction: column;
    /* 医生信息垂直排列 */
}

.doctor ul li h3 {
    font-size: 4vw;
    font-weight: 500;
    margin-bottom: 1.8vw;
}

.doctor ul li p {
    font-size: 3vw;
    color: #888;
}


/*********************** 健康评估 ***********************/
.assess {
    width: 100%;
    height: 43vw;
    background-color: #FFF;
    margin-bottom: 3vw;
}

.assess .assess-content {
    width: 100%;
    height: 30vw;
    box-sizing: border-box;
    padding: 3.6vw;
    padding-right: 0vw;
}

.assess .assess-content .scroll-box {
    width: 100%;
    height: 22.8vw;
    position: relative;
    overflow: hidden;
}

.assess .assess-content .scroll-box ul {
    width: 270vw;
    height: 22.8vw;
    display: flex;
    overflow: hidden;

    position: absolute;
    left: 0;
    top: 0;
}

.assess .assess-content .scroll-box ul li {
    width: 41vw;
    height: 22.8vw;
    margin-right: 4vw;
}

.assess .assess-content .scroll-box ul li:last-child {
    margin-right: 0;
}

.assess .assess-content .scroll-box ul li img {
    width: 41vw;
    height: 22.8vw;
    display: block;
}

/*********************** 健康咨询 ***********************/
.info {
    width: 100%;
    background-color: #FFF;
}

.info ul {
    width: 100%;
}

.info ul li {
    width: 100%;
    height: 27vw;
    box-sizing: border-box;
    padding: 3.6vw;
    display: flex;
    justify-content: space-between;
}

.info ul li img {
    width: 30vw;
    height: 19.8vw;
}

.info ul li div {
    width: 59vw;
}

.info ul li div h3 {
    font-size: 4vw;
    font-weight: 500;

    /*设置字符串超长后截取变省略号*/
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.info ul li div span {
    font-size: 3vw;
    color: #999;
}

.info ul li div p {
    text-align: right;
    font-size: 3vw;
    color: #999;
}

.info ul li div p i {
    margin-right: 2vw;
}



/*********************** common样式 ***********************/
.top-ban {
    width: 100%;
    height: 15.7vw;
}

.middle-ban {
    width: 100%;
    height: 1px;
    background-color: #E9E9E9;
}

.bottom-ban {
    width: 100%;
    height: 14.2vw;
}

.item-title {
    width: 100%;
    height: 13vw;
    box-sizing: border-box;
    padding: 0 3.6vw;
    border-bottom: solid 2px #F9F9F9;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.item-title p {
    height: 4.3vw;
    line-height: 4.3vw;

    box-sizing: border-box;
    padding-left: 3vw;

    font-size: 4.3vw;
    border-left: solid 2px #127A90;
    letter-spacing: 0.2vw;
}

.item-title span {
    font-size: 3vw;
    color: #666;
    user-select: none;
    cursor: pointer;
}
</style>